import React, { Component } from 'react';
import styles from './index.less';
import normal from '@/assets/normal.svg';
import notify from '@/assets/notify.svg';
import overweight from '@/assets/overweight.svg';
import remind from '@/assets/remind.svg';
import urgent from '@/assets/urgent.svg';
import electricitySafety from '@/assets/electricity-safety.svg';
import energyConsumption from '@/assets/energy-consumption.svg';
import information from '@/assets/information.svg';
import { Tooltip, List } from 'antd';
var scrollInterval = '';
class Notices extends Component {
  constructor(props) {
    super(props);
    this.state = {
      info: [],
      listMarginTop: '0',
      animate: false,
      isBack: false,
    };
  }
  componentWillReceiveProps(nextProps) {
    if (nextProps?.data && nextProps.data.length > 0) {
      this.setState(
        {
          info: nextProps.data,
          isBack: nextProps.isBack,
        },
        () => {
          // if(this.state.isBack===true){
          //   scrollInterval = setInterval(this.scrollDown, 3000);
          // }
        },
      );
    }
  }

  componentDidMount() {
    // this.handleFull()
    // scrollInterval = setInterval(this.scrollDown, 3000);
  }
  handleFull() {
    if (screenfull.isEnabled) {
      screenfull.toggle();
    }
  }
  scrollDown = (e) => {
    let ulNode = document
      .getElementById('scrollList')
      .getElementsByTagName('ul')[0];
    ulNode && ulNode.firstChild.classList.remove('opacityAnimation');
    this.setState({
      animate: true,
      listMarginTop: ulNode && ulNode.lastChild.scrollHeight + 'px',
    });
    setTimeout(() => {
      this.state.info.unshift(this.state.info[this.state.info.length - 1]);
      ulNode && ulNode.firstChild.classList.add('opacityAnimation');
      this.state.info.pop();
      this.setState({
        animate: false,
        listMarginTop: '0',
      });
      this.forceUpdate();
    }, 1000);
  };

  componentWillUnmount() {
    clearInterval(scrollInterval);
  }
  render() {
    const { info } = this.state;
    return (
      <div className={styles.notices}>
        <div className={styles.title}>
          <img src={normal} alt="" />
          通知
        </div>
        <div className={styles.list}>
          <List
            itemLayout="horizontal"
            id="scrollList"
            style={{ marginTop: this.state.listMarginTop }}
            className={this.state.animate ? styles.animate : ''}
            dataSource={info}
            renderItem={(item) => (
              <List.Item className={styles.li}>
                <span className={styles.one}>
                  <img
                    src={
                      item.level == 1
                        ? energyConsumption
                        : item.level == 2
                        ? electricitySafety
                        : item.level == 3
                        ? information
                        : information
                    }
                  />
                </span>
                <div className={styles.sign}>
                  <img
                    src={
                      item.level == 1
                        ? urgent
                        : item.level == 2
                        ? overweight
                        : item.level == 3
                        ? remind
                        : notify
                    }
                  />
                </div>
                <div className={styles.content}>
                  <Tooltip title={item.content} placement="topLeft">
                    <span> {item.content}</span>
                  </Tooltip>
                </div>
              </List.Item>
            )}
          />
        </div>
      </div>
    );
  }
}
export default Notices;
